﻿@section scripts{
    <script type="text/javascript">
        $(document).ready(function() {
            $("#myTab li").bind("click", function() {
                $("#myTab li").removeClass("active");
                $(this).addClass("active");
                var queryHour = $(this).attr("value");
                showRainSurveyData(queryHour);
            });
            showRainSurveyData(1);
        });

        function showRainSurveyData(queryHour) {
            $.ajax({
                type: "get",
                dataType: "json",
                url: "/Wap/RainSurveyData/@ViewBag.StationNum/" + queryHour,
                success: function (json) {
                    var html = new Array();
                    html.push('<table  width="100%" border="0" cellpadding="1" cellspacing="1" bgcolor="#edf1fc" style="border: solid 1px #ccc; border-collapse: collapse;">');
                    if (json.length > 0) {
                        html.push('<tr>');
                        html.push('<td align="center"><strong>站名</strong></td>');
                        html.push('<td align="center"><strong>站号</strong></td>');
                        html.push('<td align="center"><strong>雨量</strong></td>');
                        //html.push('<td align="center"><strong>发布时间</strong></td>');
                        html.push('</tr>');
                    }
                    for (var i = 0; i < json.length; i++) {
                        html.push('<tr>');
                        html.push('<td align="center">' + json[i].stationname + '</td>');
                        html.push('<td align="center">' + json[i].stationnum + '</td>');
                        html.push('<td align="center">' + json[i].rain/10 + '</td>');
                        //html.push('<td align="center">' + json[i].observtime + '</td>');
                        html.push('</tr>');
                    }
                    html.push('</table>');
                    $("#tabList").html(html.join(''));
                }
            });
        }

        
    </script>
}
<div class="tabbable" style="margin-top: 10px;">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active" value="1"><a href="javascript:;" data-toggle="tab">1小时</a></li>
        <li class="" value="3"><a href="javascript:;" data-toggle="tab">3小时</a></li>
        <li class="" value="6"><a href="javascript:;" data-toggle="tab">6小时</a></li>
        <li class="" value="12"><a href="javascript:;" data-toggle="tab">12小时</a></li>
        <li class="" value="24"><a href="javascript:;" data-toggle="tab">24小时</a></li>
        <li class=""  value="48"><a href="javascript:;" data-toggle="tab">48小时</a></li>
    </ul>
    <div class="tab-content padding-2">
        <div class="tab-pane active" style="background: top center no-repeat;">
            <div id="tabList" class="tab-pane active" style="background: top center no-repeat;">
                <div class="clear"></div>
            </div>
            
        </div>
    </div>
</div>
